<template>
  <div>
    <div class="upLoad_img">
      <div class="title">
        上传头像：
      </div>
      <div>
        <div class="icon" @click="uploadImg" v-show="!paramsData.headPic">
          <input class="upInp" v-show="false" type="file" @change="inpChange" ref="imfRef" id="uploadImg" />
          <div class="line1"></div>
          <div class="line2"></div>
        </div>
        <img @click="uploadImg" v-if="paramsData.headPic" :src="paramsData.headPic" alt="" accept="image/*" />
      </div>
    </div>
    <div class="upLoad_img">
      <div class="title">
        准到校截图：
      </div>
      <div>
        <div class="icon" @click="uploadImg2" v-show="!paramsData.picture">
          <input class="upInp" v-show="false" type="file" @change="inpChange2" ref="imfRef2" id="uploadImg2" />
          <div class="line1"></div>
          <div class="line2"></div>
        </div>
        <img class="screenshot" @click="uploadImg2" v-if="paramsData.picture" :src="paramsData.picture" alt=""
          accept="image/*" />
      </div>
    </div>
    <sc-basic-form :formItems="clueFormItems" :model="studentModel" :rules="rules" label-width="140" ref="studentForm">
      <template #gradeSelect>
        <grade-select v-model:annualDepart="studentModel.annualDepart" v-model:grade="studentModel.grade"></grade-select>
      </template>
      <template #referStudent>
        <scTableSelect style="width: 100%" clearable placeholder="请选择转介绍学员" :tableWidth="600"
          :apiObj="$API.student.selectIntrodStudent" :props="{
            label: 'studentName',
            value: 'id',
          }" v-model="introdStudent" @change="introdStudentChange">
          <template #header="{ form, submit }">
            <el-form :inline="true" :model="form">
              <el-form-item label="学员姓名">
                <el-input type="text" v-model="form.studentName"></el-input>
              </el-form-item>
              <el-form-item label="手机">
                <el-input type="text" v-model="form.parentPhone"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submit">搜索</el-button>
                <el-button type="primary" @click="resetForm(form)">重置</el-button>
              </el-form-item>
            </el-form>
          </template>
          <el-table-column prop="studentName" label="学员姓名"></el-table-column>
          <el-table-column prop="parentPhone" label="手机"></el-table-column>
        </scTableSelect>
      </template>
      <template #referEmployees>
        <div class="p-flex p-ai-c m-b-15">
          <div class="p-f-1">
            <el-input placeholder="请选择转介绍员工" v-model="introduceStudentsName" clearable @click.stop="clickInp"></el-input>
          </div>
        </div>
      </template>
      <!-- <template #footer>
      <slot name="footer">
      </slot>
    </template> -->
    </sc-basic-form>
    <div>
      <div class="p-flex p-ai-c m-b-15">
        <div class="title">
        资源来源：
        </div>
        <div class="p-f-1">
          <el-select v-model="paramsData.place" style="width: 100%;" @change="myOptionChange" placeholder="请选择资源来源">
            <el-option
            v-for="i in myOption"
            :key="i.value"
            :label="i.label"
            :value="i.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="p-flex p-ai-c m-b-15">
        <div class="title">
          来源细分：
        </div>
        <div class="p-f-1">
          <el-select v-model="paramsData.subdivide" style="width: 100%;" placeholder="请选择来源细分">
            <el-option
            v-for="i in comMyOption"
            :key="i.value"
            :label="i.label"
            :value="i.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="relation-list">
        <div class="item" v-for="(item, index) in paramsData.contactsInfos" :key="index">
          <div v-if="item.primary == 1" class="type">
            主
          </div>
          <div class="inp">
            <div class="item-tit">联系人姓名：</div>
            <el-input type="text" placeholder="请输入联系人姓名" v-model="item.contacts"></el-input>
          </div>
          <div class="select-inp">
            <div class="item-tit">亲属关系：</div>
            <el-select v-model="item.contactsRelation" placeholder="请选择">
              <el-option v-for="item2 in relationshipList" :key="item2.value" :label="item2.label" :value="item2.value">
              </el-option>
            </el-select>
            <div class="btn">
              <el-button @click="setMainContacts(index)">设为主联系人</el-button>
            </div>
          </div>
          <div class="inp">
            <div class="item-tit">联系方式：</div>
            <el-input type="text" placeholder="请输入联系方式" v-model="item.contactsPhone"></el-input>
          </div>
        </div>
      </div>
      <div class="upBtn">
        <slot name="footer"></slot>
      </div>
    </div>

    <!-- 转介绍员工 -->
		<SelectStaff ref="selectRef" @confirm="sureStall"/>
  </div>
</template>

<script setup>
import { ref, reactive, computed, defineProps, defineEmits, defineExpose } from "vue";
import GradeSelect from "../grade-select.vue";
import SelectStaff from "@/components/SelectStaff/index.vue";
import { clueFormItems, rules } from "./data";
const props = defineProps({
  clueInfo: {
    type: Object,
    default: () => {return {}}
  }
})

const emits = defineEmits(['update:clueInfo'])
const myOption = ref([
  {value: "百度大搜", label: "百度大搜"},
  {value: "合作网站", label: "合作网站"},
  {value: "抖音信息流", label: "抖音信息流"}
])
const comMyOption = computed(() => {
  let option = []
  if (paramsData.place === "百度大搜") {
    option = [
      {value: "商务通", label: "商务通"},
      {value: "加微信", label: "加微信"},
      {value: "来电", label: "来电"},
      {value: "400", label: "400"},
      {value: "智能客服", label: "智能客服"},
    ]
  }else if(paramsData.place === "合作网站") {
    option = [
      {value: "优学网", label: "优学网"},
      {value: "培训世界", label: "培训世界"},
      {value: "好学校", label: "好学校"},
      {value: "坦途网", label: "坦途网"},
      {value: "天华科技", label: "天华科技"},
      {value: "勤学网", label: "勤学网"},
      {value: "教育联展", label: "教育联展"},
      {value: "松岗提供", label: "松岗提供"},
      {value: "教育宝", label: "教育宝"},
      {value: "放心学", label: "放心学"}
    ]
  }else if(paramsData.place === "抖音信息流") {
    option = [
      {value: "抖音表单", label: "抖音表单"},
      {value: "字节加微信", label: "字节加微信"},
      {value: "字节来电", label: "字节来电"},
      {value: "腾讯表单", label: "腾讯表单"},
      {value: "小红书表单", label: "小红书表单"},
      {value: "快手表单", label: "快手表单"},
      {value: "快手加微信", label: "快手加微信"},
    ]
  }else{
    option = []
  }
  return option
})
const myOptionChange = (val) => {
  paramsData.subdivide = ""
}

const studentModel = computed({
  get() {
    return props.clueInfo
  },
  set(val) {
    emits('update:clueInfo', val)
  }
})

const introdStudent = ref({})

function introdStudentChange(sudent) {
  introdStudent.value = {
    studentName: sudent.studentName + " " + sudent.parentPhone,
    id: sudent.id,
  };
}

function resetForm(form, resetValue = {}) {
  Object.keys(form).forEach((key) => {
    form[key] = resetValue[key] ?? "";
  });
}

const paramsData = reactive({
	contactsInfos: [
		{
			primary: 1,
			contacts: "",
			contactsRelation: "",
			contactsPhone: ""
		},
		{
			primary: 2,
			contacts: "",
			contactsRelation: "",
			contactsPhone: ""
		}
	],
	headPic: "",
	picture: "",
	place: "",
	subdivide: ""
})

const relationshipList = reactive([
  { value: "母亲", label: "母亲" },
  { value: "父亲", label: "父亲" },
  { value: "奶奶", label: "奶奶" },
  { value: "爷爷", label: "爷爷" },
  { value: "姥姥", label: "姥姥" },
  { value: "佬爷", label: "佬爷" },
  { value: "其他", label: "其他" },
])

function setMainContacts(num) {
  paramsData.contactsInfos.forEach((t, index) => {
    index == num ? t.type = true : t.type = false
  })
}

function inpChange(e) {
  const reader = new FileReader()
  reader.onload = function (o) {
    // console.log(o.target.result);
    paramsData.headPic = o.target.result
  }
  reader.readAsDataURL(e.target.files[0])
}

function inpChange2(e) {
  const reader = new FileReader()
  reader.onload = function (o) {
    paramsData.picture = o.target.result
  }
  reader.readAsDataURL(e.target.files[0])
}

function uploadImg() {
  const uploadInp = document.getElementById('uploadImg')
  uploadInp.click()
}

function uploadImg2() {
  const uploadInp = document.getElementById('uploadImg2')
  uploadInp.click()
}

const selectRef = ref(null)

// 转介绍员工名称
const introduceStudentsName = ref("")

// 打开选择转介绍员工弹窗
function clickInp() {
	const title = "转介绍员工"  //弹窗标题
	selectRef.value.openDialog(title)
}

// 确认转介绍员工
function sureStall(val) {
  console.log(val);
  introduceStudentsName.value = val.name
}

defineExpose({ paramsData })

</script>

<style lang="scss" scoped>
.mr10 {
  margin-right: 10px;
}

.upLoad_img {
  display: flex;
  padding-bottom: 10px;

  img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }

  .screenshot {
    width: 150px;
    height: auto;
    border-radius: 0;
  }

  .icon {
    cursor: pointer;
    width: 120px;
    height: 120px;
    border: 3px dashed #dcdfe6;
    border-radius: 5px;
    position: relative;

    .line1 {
      width: 50px;
      height: 4px;
      background: #dcdfe6;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      top: 50%;
    }

    .line2 {
      width: 3px;
      height: 50px;
      background: #dcdfe6;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      top: 50%;
    }

    .upInp {
      color: transparent;
      width: 120px;
      height: 120px;
      cursor: pointer;

      input#file-upload-button {
        display: none;
      }

      input#file-upload-button {
        display: none;
      }
    }
  }
}

.title {
    width: 140px;
    color: #606266;
    font-size: 14px;
    text-align: end;
    height: 34px;
    padding-right: 4px;
    line-height: 34px;
  }

.headmaster-list,
.relation-list {
  .item {
    .item-tit {
      width: 140px;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      text-align: end;
      padding-right: 5px;
      color: #606266;
    }

    .select-inp,
    .inp {
      display: flex;
      align-items: center;
      margin-bottom: 18px;

      .el-input {
        width: 535px;
      }
    }

    .btn {
      margin-left: 30px;
    }
  }
}

.relation-list {
  position: relative;

  .item {
    background: #cde4fc;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;

    .type {
      position: absolute;
      font-size: 16px;
      color: #ffff;
      background: #409eff;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 27px;
      border-radius: 50%;
    }
  }
}

.upBtn {
  padding-left: 150px;
}
</style>
